Menú arcoiris

• INICIO
• Día a día
• Fotografías
• La familia
• Reflexiones

Hace unos días en uno de los correos me pedían un menú para un blog muy especial, una página personal donde su autora escribe pensamientos y reflexiones durante su embarazo y sobre su bebé que está a punto de nacer.
Me pedía un menú para ese blog, yo le hablé de un menú que días atrás me había encantado pero ella quería algo de colores llamativos y alegres.
Estuve buscando porque algo había visto pero son tantos donde escoger que asaltan las dudas.
Me decidí por este que yo he llamado "Arcoiris" es un menú de Stu Nicholls que a ella le ha encantado. Y a decir verdad con el fondo de nubes da la sensación de estar en el país de las maravillas.

No es un problema si los colores no son de nuestro agrado, podemos sustituirlos por otros. Para añadir este menú nos dirigimos a plantilla Edición de HTML y justo antes de ]]></b:skin> añadimos lo siguiente:

Ver código

#painters { padding:0; margin:5em 0; list-style-type:none; }
#painters li { width:75px; height:20px; float:left; border:1px solid #000; margin-right:2px; }
#painters a em { font-style:normal; font-size:1em; line-height:1.5em; }
#painters a { text-decoration:none; color:#000; position:absolute; width:75px; height:20px; display:block; text-align:center; }#painters a.red {background:#c00; color:#fff;}
#painters a.orange {background:#fc0; color:#000;}
#painters a.yellow {background:#ee0; color:#000;}
#painters a.green {background:#080; color:#fff;}
#painters a.blue {background:#00c; color:#fff;}
#painters a:hover { width:120px; height:28px; z-index:200; background:#aaa; }
#painters a:hover em { font-size:1.5em; line-height:1.1em; overflow:hidden; cursor:pointer; background:#fff; border:1px solid #000; position:absolute; width:120px; height:25px; left:-12px; top:-8px; }
#painters a:hover.red em {background:#c00;}
#painters a:hover.orange em {background:#fc0;}
#painters a:hover.yellow em {background:#ee0;}
#painters a:hover.green em {background:#080;}
#painters a:hover.blue em {background:#00c;}

Guardamos los cambios y nos disponemos a añadir un gadget escogemos para ello HTML/Javascript y en su interior añadimos lo siguiente:

Ver código

<ul id="painters">
<li><a class="red" href="#"><em>INICIO</em></a></li>
<li><a class="orange" href="#"><em>Día a día</em></a></li>
<li><a class="yellow" href="#"><em>Fotografías</em></a></li>
<li><a class="green" href="#"><em>La familia</em></a></li>
<li><a class="blue" href="#"><em>Reflexiones</em></a></li>
</ul>

Sustituimos el texto y añadiremos el nuestro.
El lugar para añadir la url de la página a enlazar es sustituyendo el asterisco # de la misma línea.

Hay cosas que cuando las veo me gustan tanto que no puedo resistirme a probar, como en este caso el script sobre el que J.Miur comenta en su blog.

El resultado es conseguir que las imágenes sean mostradas en mayor tamaño con un click sin salir de la página. Me adelanté a decir de qué va el tema pero es igual veamos como añadirlo al blog y los resultados.

Nos situamos en plantilla Edicción de HTML y añadimos el script antes de </head>

<script type='text/javascript'>
var nW,nH,oH,oW;
function zoomToggle(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichImage){
oW=whichImage.style.width;oH=whichImage.style.height;
if((oW==iWideLarge)||(oH==iHighLarge)){
nW=iWideSmall;nH=iHighSmall;
}else{
nW=iWideLarge;nH=iHighLarge;
}
whichImage.style.width=nW;whichImage.style.height=nH;
}
</script>

Una vez añadido ya podemos hacer uso de él en cualquier imagen, para ello bastará con añadir lo siguiente:
<img src="url_de_imagen" width="ancho1" height="alto1" onclick="zoomToggle('ancho1px','alto1px','ancho2px','alto2px',this);">


Sustituimos ancho1px y alto1px por el tamaño de la imagen a mostrar inicialmente, donde ancho2px y alto2px es el tamaño de la imagen al hacer clic sobre ella.
Según J.Miur es recomendable que los atributos (width="ancho1" height="alto1") tengan el mismo valor que los de la función (ancho1px','alto1px) pero no interfiere en nada si no es así.

Ver entrada original en Vagabundia

En ocasiones nos encontramos que cualquier texto que añadimos a nuestro blog no aparece como en realidad lo escribimos.

Normalmente comenzamos a escribir con mayúsculas sin embargo nos encontramos que nuestro texto se convierte de forma que añade mayúsculas al principio de cada palabra, otras el texto aparece todo en mayúsculas o por el contrario todo en minúsculas.

Eso ocurre por la propiedad text-transform añadida en la CSS de nuestra plantilla.

text-transform: capitalize;

text-transform: uppercase;

text-transform: lowercase;

text-transform: none;

Con capitalize cada palabra comenzará en mayúsculas.
Esto Es Un Texto Con La Propiedad Capitalize

uppercase mostrará todo el texto en mayúsculas.
ESTO ES UN TEXTO CON LA PROPIEDAD UPPERCASE

lowercase mostrará todo el texto en minúsculas.
esto es un texto con la propiedad lowercase

El valor none respetará el texto tal cual lo hayamos escrito.
Esto es un texto con la propiedad none

Para solucionarlo debemos ubicarnos en plantilla Edicción de HTML y localizar la parte que deseamos modificar.

Si es en el blog en general lo haremos en body {
El título del blog en #header h1 {
Para descripción debajo del título ubicaremos #header .description {
En las entradas buscaremos .post {
En los títulos de la sidebar en .sidebar h2 {
Si fuera la sidebar en .sidebar {
Al final de las entradas en .post-footer {
En comentarios nos llevaría a #comments {
Los enlaces también pueden contener la propiedad text-transform, los podemos modificar ubicando body { y a continuación:

* a:link "tal y como lo vemos"

* a:visited "enlace visitado"
* a:active "cuando se está pulsando"
* a:hover "con el cursor encima"

Puede que deje algún otro sitio más, si fuera así me lo comentáis y lo añadimos pero con eso creo podemos localizar nuestro problema, también es posible que según plantilla venga reflejado de otra forma pero en todas es posible solucionarlo.

Visto en S Mashing Magazine

Yo pensaba que con Photoshop ya estaba todo descubierto y estaba muy confundida, porque visitando a ERVDESIGN he descubierto Rsizr más tarde buscando información en Google he visto que numerosas páginas conocidas ya habían hablado sobre él pero aún así me ha gustado tanto que quise tenerlo en mis archivos y de paso compartirlo con aquellos amantes del retoque fotográfico.
Rsizr es una aplicación en Flash y para nuestra suerte online, permite cambiar el tamaño de fotografías en archivo JPG, PNG, GIF trabaja con un algoritmo que para ser sincera no entiendo y por lo tanto no sé explicar lo que es.
Lo que si sé es que este algoritmo altera las dimensiones de una imagen no ampliándola o reduciéndola sino por la eliminación o el aumento de píxeles en la imagen.
Con este sistema es posible definir automáticamente zonas de gran importancia como rostros o detalles de gran interés así como detecta y elimina los detalles de menor importancia.
Normalmente con cualquier editor esto no se puede hacer sin perder calidad en las imágenes o dando la sensación de ensanchar o estrechar toda la panorámica de la fotografía con todos los detalles incluidos.
Con Gimp también es posible obtener los mismos resultados pero es necesario un plugin de reescalado líquido
Mejor que veáis este vídeo:

Para orientarse encontraremos una guía con imágenes y las indicaciones para comenzar.

Una vez probado este jueguito nuevo puedo decir que además de poder reducir imágenes sin perder un ápice de nitidez también es posible eliminar objetos de la imagen.

Para el ejemplo escogí una fotografía de 1600x1200 (tremenda) sacada con una cámara digital, no la hizo un fotógrafo profesional pero aún siéndolo creo que hay cosas que no se pueden remediar, por ejemplo la inoportuna aparición justo en el momento de sacar la fotografía.
Tampoco estaba previsto esa puerta que aunque preciosa rompía un poco la visión de las columnas.


Si os fijáis bien la puerta y la espontánea han sido eliminadas sin necesidad de utilizar el recorte en la fotografía, la columna que sirve de escondite queda intacta se ha reducido el tamaño y la nitidez de la imagen sigue siendo la misma.

No sé si debido a mi conexión se hizo algo largo el proceso, pero en definitiva me ha gustado bastante.

PhotoNotes es un sitio donde podemos subir cualquier imagen desde nuestro PC y darle un bonito efecto Polaroid, la particularidad que tiene es los diferentes modelos a escoger, así como el tipo de letra y color para el pie de nuestras fotografías.
Para obtener la fotografía debemos añadir nuestra cuenta de correo, es ahí donde la recibiremos en breves momentos. También podemos obtenerla por el sencillo procedimiento de guardar como...

TusWallpapersGratis

El gadget de Seguidores es la novedad, lo añadimos pero algo no termina de gustarnos así que vamos a personalizarlo, comenzaremos por situarnos en plantilla Edición de HTML y marcamos la casilla de expandir plantilla de artilugios ¿ya está? pues empezamos.

* Eliminar el número de seguidores que aparece en el título que añadimos al gadget.
Buscamos:

<b:widget id='Followers1' locked='false' title='(aquí saldría el título de la sidebar' type='Followers'>

Unas líneas después encontraremos:

<h2 class='title'><data:title/> (<data:totalFollowerCount/>)</h2>

eliminamos (<data:totalFollowerCount/>) y con esto nos deshacemos del numero de seguidores que aparece junto al título.

* Para añadir un icono junto al texto de X Seguidores.

Esta vez localizamos:

<div class='followers-canvas profile-link'>

en la siguiente línea veremos:<data:followersFooterMessage/> justo antes de esa línea podemos añadir la imagen del icono.
<img src='url-imagen-icono'/><data:followersFooterMessage/>
Si deseamos añadirlo a la derecha lo añadiremos justo después.
<data:followersFooterMessage/> <img src='url-imagen-icono'/>

*Sustituir texto de SEGUIDORES.
Si deseamos sustituir el texto de Seguidores bastará con suprimir la etiqueta <data:followersFooterMessage/> y en su lugar añadimos cualquier otro texto.

* Modificar el texto de "Parar siguiente"

Cuando ya somos seguidores de un blog en lugar de mostrar el texto de "Seguir este blog" nos muestra "Parar siguiente" que no es otra cosa que eliminarle de nuestra lista.
Buscamos:

<div class='follow-this profile-link item-control following-stop-following-this'>

En las siguientes líneas veremos <data:stopFollowingMessage/> lo eliminamos y en su lugar añadimos otro texto de nuestro agrado.

*Abrir en ventana cuando accedemos a un avatar.
(Esta solución a encontré leyendo los comentarios de J.Miur)
Cuando hacemos click en una imagen de los seguidores accedemos a su blog. Lo ideal sería hacerlo sin salir de nuestra página y para ello es necesario modificar el enlace del avatar. Añadimos el atributo target='_blank' de esta forma:
Buscamos:

<a expr:href='data:follower.profileUrl' expr:title='data:follower.displayName' rel='nofollow'>

y lo sustituimos por:

<a target='_blank' expr:href='data:follower.profileUrl' expr:title='data:follower.displayName' rel='nofollow'>

También podemos hacer la misma operación en el enlace "Ver todos"

Buscamos:

<a expr:href='data:followersUri'>

lo sustituimos por:

<a target='_blank' expr:href='data:followersUri'>

* Borde,color y fondo de avatar...
Nos queda esa parte que más nos gusta, la de añadir estilos a nuestro gadget. Nos aseguramos de haber guardado los cambios en la plantilla y esta vez sin necesidad de expandir la plantilla nos vamos justo antes del famoso ]]></b:skin>

Borde y color de fondo en las imágenes con:

.follower-img {

border:1px solid #901d14;

background-color:#000000;

padding:1px;

margin:0;

}

Texto de "Seguir este blog" y "Parar siguiente" añadimos efecto hover de negrita al texto, color de fuente, tamaño y justificamos.

.follow-this {

text-align:right;

}

.follow-this a {

color:#7E92A6;

font-weight:normal;

font-size:8px;

}

.follow-this a:hover {

font-weight:bold;
color:#000;

}

(right para la derecha, center para centro y left izquierda)

Justificar texto de X seguidores:

.followers-canvas{

text-align:right;}

}

(right para la derecha, center para centro y left izquierda)

Ajustamos las imágenes de nuestros seguidores a la medida de nuestra sidebar:

.followers-grid {

width:170px;

margin:0 auto;

padding:0;

}

Un gadget muy esperado, quizás porque pensábamos que Blogger estaba siendo injusto por esa larga espera y porque no, nos dio oportunidad de probarlo como hizo con otros gadgets.
Según Blogger para disfrutar de este gadget lo haríamos de forma paulatina y al parecer a los blogs en español les ha tocado los últimos. Pero ahí está que es lo que importa

Nos enteraremos que tenemos seguidores cuando accedemos a nuestro escritorio y a la derecha nos muestra una imagen parecida a esta:


¿Cómo añadimos el gadget?
Nos situamos en plantilla de diseño y añadimos un gadget, escogemos la opción de "Seguidores"


Eso nos añade el gadget en la sidebar que arrastraremos hasta el lugar deseado, visualizando el gadget comprobaremos el número de seguidores que tenemos y el avatar de cada uno de ellos.
Podemos administrar el sitio accediendo al enlace de Administrar, desde ahí escogemos si deseamos tener seguidores públicos o bloquearlos.


!Ejem¡ ejem..(carraspeo) una no se hace responsable del avatar que escogen nuestros seguidores.

¿Cómo seguimos otro blog?
Al igual que nos pueden seguir a nosotros también puede ser a la inversa, para seguir algún blog accedemos a nuestro escritorio (al final de la página) un enlace de "Añadir" nos invita a introducir la url del blog que deseamos seguir.


Otra forma muy sencilla para hacernos seguidores de un blog es desde el mismo gadget que el autor tenga instalado, esta vez lo haremos desde el texto "Seguir este blog"


Nos pedirá marcar si deseamos seguir ese blog de forma pública o privada, marcamos la casilla que corresponda y guardamos los cambios.

De forma automática los blogs que leemos en Blogger se añaden como suscripciones en Google Reader. Podemos gestionar las suscripciones o anularlas sin que afecte a la lista de blogs.

Y eso es todo, a seguirse todo el mundo.

Una tiene manías, ya sabes... esos gestos o costumbres de hacer ciertas cosas en un momento determinado, pero después de leer esta serie de preguntas que llegaron a mi mail pienso que !No soy tan rara¡
Y a pesar de ese descubrimiento sigo sin respuesta a esas preguntas.


1-¿Por qué el pan de molde es cuadrado, si el chope, salami, mortadela...son redondos? ¿Quién tiene la culpa de esto, los tranchetes?

2-¿Por qué en las películas de miedo siempre aparece una puerta cerrada
de la que sale mucha luz por las rendijas? ¿Qué hacen los espíritus ahí detrás, fotocopias?

3-Por qué cuando yo compré el piso, a mí no me dieron la canica que tienen los demás vecinos (pero todos) y que se les cae o la echan a rodar a partir de las doce de la noche?

4-Por qué cuando llegamos a lo alto de una montaña nos ponemos las manos en la cadera?

5-Por qué abrimos la boca cada vez que miramos al techo?

6-Por qué nos da por ir a la nevera cada cuarto de hora si siempre hay lo mismo?

7-¿Por qué si nunca usamos las páginas amarillas,cuando las ves en el portal te pones contentísimo y, de hecho, piensas en cogerlas todas?

8-¿Por qué cuando nos sonamos los mocos abrimos el pañuelo y miramos lo que hemos echado?
¿Qué esperamos encontrar? ¿Berberechos?

9-¿Por qué cuando nos cuelgan el teléfono nos quedamos mirándolo como si el teléfono tuviera la culpa?

10-¿Por qué cuando nos llaman al móvil sentimos la necesidad irrefrenable de ponernos a andar de un lado a otro?

11-¿Por qué cuando estamos en un lugar alto nos obsesionamos con ver nuestra casa?
'Mira, mira ahí, al lado del edificio rojo...'.

12-¿Por qué cuando echamos una carta al buzón no podemos evitar mirar por la ranura
e investigar qué hay dentro? ¿Qué esperamos encontrar?¿Un cartero enano?

13-¿Y por qué abrimos los ojos cuando estamos a oscuras?¿Qué creemos?
¿Que tenemos superpoderes?.

14-¿Por qué hay tanta gente que cuando como un helado de cucurucho, a la mitad,
muerden el piquito de abajo? Si saben que por ahí les va a chorrear!!!

15-¿Por qué nos hace tanta gracia que se nos quede la marca del reloj cuando nos ponemos morenos y se lo decimos al de al lado? Mira, se me ha quedado la marca, parece que llevo reloj, pero no'

16-¿Porqué cuando un aparato eléctrico no funciona no se nos ocurre otra cosa que apretar con más fuerza el botón de encendido?

17-¿Por qué cuando alguien se va a poner gotitas en los ojos abre la boca de esa manera tan extraña? ¡Es colirio, no tequila!!!!!!

18-¿Por qué cuando cogemos una caja de medicamentos, por muchas vueltas que le demos, siempre la abrimos por el lado que no es y aparece el prospecto, ahí, doblado?

19-Por qué cuando vas de viaje te sientes culpable si no visitas los museos?

20-Por qué cuando nos enfadamos nos cruzamos de brazos?¿Qué ganamos con ello?

21-¿Y por qué elegimos siempre las bodas para dar a conocer a nuestros padres que fumamos?

22-¿Y por qué cuando tenemos miedo nos metemos debajo de las sábanas? ¿Creemos que así un cuchillo no atraviesa la sábana?

23-¿Por qué has mirado al techo al leer la quinta pregunta? ESTÁ BIEN EHHHHH???

Flagcounter es un sistema de estadísticas que nos muestra las banderas de los países visitantes, también nos ofrece la posibilidad de acceder a la página mediante un clic en nuestro contador y comprobar el porcentaje de visitas realizadas a nuestro blog. En esa misma página también es posible obtener información detallada sobre un país haciendo clic sobre el nombre.

Permite personalizar color de fondo, texto y borde mostrando un vista previa en la parte inferior de la página.

De los dos códigos que proporciona debemos escoger el primero que añadiremos nuestro blog incluyéndolo en un gadget escogiendo para ello HTML/Javascript.

Hay que tener en cuenta que al navegar por una página se contabiliza una visita por cada acceso a la página principal.

La cantidad de enlaces que a veces añadimos a nuestro blog nos obliga a buscar la forma de incluirlos sin ocupar demasiado espacio.
Ayer Games me sugería un scroll "con flechitas" este que traigo a continuación lo vi en el blog de César, le hice algunas modificaciones y este es el resultado.
El siguiente código lo añadimos en Diseño/Añadir un gadget/HTML/Javascript

<script language="JavaScript1.2">
var speed=2

iens6=document.all||document.getElementById
ns4=document.layers
if (iens6)
{document.write
('<div id="container" style="position:relative;width:180px;height:240px;overflow:hidden;border:4px ridge #B0171F; ">')
<!--Modificar ancho,largo y borde del contenido-->
document.write('<div id="content" style="position:absolute;width:183px;left:2px;top:0px">')
}
</script>
<div style="background-color:#fff;width:185px;border:1px solid #B0171F;">
  <!-- Color de fondo del contenido--> 
<!--Enlaces- imágenes- contenido-->
<!--Enlaces- imágenes- contenido-->
</div>

<script language="JavaScript1.2">
if (iens6){
document.write('</div></div>')
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}

function movedown(){
if (window.moveupvar) clearTimeout(moveupvar)
if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
 <!--En movedown escogemos velocidad-->
}

function moveup(){
if (window.movedownvar) clearTimeout(movedownvar)
if (iens6&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)
   <!--En moveup escogemos velocidad-->
}

function stopscroll(){
if (window.moveupvar) clearTimeout(moveupvar)
if (window.movedownvar) clearTimeout(movedownvar)
}

function movetop(){
stopscroll()
if (iens6)
crossobj.style.top=0+"px"
else if (ns4)
crossobj.top=0
}

function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script>

<!--Para añadir las imágenes de subir y bajar desde aquí;-->
<div style="background-color:#fff;width:185px;border:1px solid #B0171F;">
<!--En background añadimos color de fondo a la caja de imágenes -->
<center>
<a href="javascript:movedown()"><img src="url-imagen SUBIR"/></a> <a href="javascript:moveup()"><img src="url-imagen-BAJAR"/></a> <a href="javascript:stopscroll()"><img src="url-imagen-PAUSA"/></a> <a href="javascript:movetop()"><img src="url-imagen INICIO"/></a>
</center>
</div>
     <!--Hasta aquí->

Para personalizarlo añadí unas líneas en negrita que sirven como orientación.

Esto es una imagen

La barra de navegación es posible situarla en la parte superior o inferior del contenido,la solución está en "mover" al principio o final el código que se encuentra en el interior de estas dos líneas:

<!--Para añadir las imágenes de subir y bajar desde aquí;-->
código...
código...
código...
<!--Hasta aquí->

Web Designer Wall es un blog que siempre me ha atraído por su diseño y una de las cosas que más me gusta es el menú tan original con efecto hover (El efecto hover nos permite definir un aspecto determinado cuando situamos el cursor sobre el objeto).

Ha sido creado con Photoshop valiéndose de la ayuda de imágenes vectoriales, yo le veo mucho mérito ya que aún con todas las herramientas a nuestro alcance sin imaginación de poco nos sirve.
El menú trae consigo un fondo por si deseamos añadirlo, esos manitas del Photoshop (que yo sé que hay muchos) lo tienen más sencillo para crear un fondo acorde con su blog así como otras imágenes o de distinto color.

Los que como yo unos aficionadillos tendremos que conformarnos con el menú sin fondo pero tampoco está nada mal que conste.

•  
• Home
• About
• RSS

Para el ejemplo lo he reducido de tamaño pero si queréis ver como quedaría con las medidas que proporciona la autora podéis verlo aquí.
La forma de añadirlo es muy sencilla. Justo antes de ]]></b:skin> añadimos los estilos para el menú.

Ver código

#menu {  list-style: none;  padding: 0;  margin: 0;  background: url(http://unllua.blu.livefilestore.com/y1pztIDCw3oJSgkJtu46GuTAU3C6ouPOmoKAN3XDHqZPBn17o1sRHuZE63gCRmph3WavY4TBNnTdmM/menu-bg.jpg) no-repeat;width: 774px;  height: 210px;position: relative;}
#menu span {  display: none;  position: absolute;}
#menu a {  display: block;  text-indent: -900%;  position: absolute;  outline: none;}
#menu a:hover {  background-position: left bottom;}
#menu a:hover span {  display: block;}
#menu .home {  width: 144px;  height: 58px;  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqz1qR1cmINNs5BFsUvy2Y31aDunhTr-7tDmw4zX3PjHKRqQW4z9czv_x6XmLmtN33alC3HVIBBilSrAj8WuE85oErXusH6pfMaS3SoFC7GA6Jjx_BnFiX0T5MEu259GQ7Bwoo-w/s320-r/home.gif) no-repeat;  left: 96px;  top: 73px;}
#menu .home span {  width: 86px;  height: 14px;  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMSZwjf83ESJh55YUO81DZy11h_cs1H0UR4mHhllQgUx7G1XkQKYEGtXlZHeUXYbd1tkDh1Ef5cVZoeJsIaGwPu0ENhCzB0Hcsui-HJChqkQFhS1qHPap2jH-94PpS9JXH_FAzog/s320-r/home-over.gif) no-repeat;left: 28px;top: -20px;}
#menu .about {  width: 131px;  height: 51px;  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8wQ_CS-HWvjfRlNXoql3p0aiZYQn3cQaDJuXIywldHInV9JStlrtUQYmQ9LcD5nLVl8rf7yTCVKcGka8vD77oWpz6lbmWAA_NlwBs2j8MEluTCMLA8drTThiEd2_IK_b6fGJGKQ/s320-r/about.gif) no-repeat;  left: 338px;  top: 97px;}
#menu .about span {  width: 40px;  height: 12px;  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivbjYF6LQw88KEsAeTFH_yBh3VBDPIuBihmOlBMmIpSnVrCHxr8BTSYkYwNOf5oJKLnYz4Vp58xAteEAVRp9mvykBwEielhQyFDk9LCxO4TqHPbVAbFC5B7WqtH4w921sPm6lgkg/s320-r/about-over.gif) no-repeat;  left: 44px;  top: 54px;}
#menu .rss {  width: 112px;  height: 47px;  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwrjV_knMcx5S8daD9XNzkLjZn_SIGhmyRJgxtyPt_uuD5FoebC7K1QTvSaBffsYNJqm3GIy_EfImaogpzlS0esIy33UMF06xRhaq_rS7JNbZhQRxo3F4lp_oz8aU4TroKG4AxsQ/s320-r/rss.gif) no-repeat;  left: 588px;  top: 94px;}
#menu .rss span {  width: 92px;  height: 20px;  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi480CHpve08I2FFY1IeULeGDwJSBfq9JgmegFTDO2WvjE7evRHCCKbzNphbU8poKGiKyNdhPYnMTD4OgDGnaK2_dDkneGp-rQBcwiZ-2itL8-e_KuSsebh1YvmCcqH7_ijITRgVg/s320-r/rss-over.gif) no-repeat;  left: 26px; top: -20px;}

He dejado las imágenes añadidas para facilitar la ubicación de cada una y ver el efecto si decidís probar, pero recomiendo alojarlas en vuestro servidor y sustituirlas, por si en cualquier momento fueran eliminadas.

El siguiente paso es añadir un elemento de página HTML/Javascript y en su interior añadimos:

<ul id="menu">  <li><a href="url-de-la-pagina" class="home">Home <span></span></a></li>  <li><a href="url-perfil" class="about">About <span></span></a></li>  <li><a href="url-del-feed" class="rss">RSS <span></span></a></li></ul>

Ya soló nos queda arrastrar la etiqueta, añadir la url de la página de inicio, el perfil y enlace a nuestro feed.

¿Y eso es todo? no, seguramente las medidas del menú no cuadran bien en tu blog porque quieres añadirlo en la sidebar, puedes hacer esas modificaciones de las medidas en el código que añadimos a la plantilla, por ejemplo:

Color rojo: Puedes cambiar la medida dependiendo el espacio donde se va a añadir el menú-

Color amarillo modifica los valores del tamaño de la imagen.

Color  azul podemos situar la imagen, ubicarla hasta el lugar deseado.

Por último color morado (lila) añadimos imagen de fondo, de no desearla omitimos añadir la url.

Imágenes a descargar:

#menu { (Fondo del menú)

#menu .home {

#menu .home span {

#menu .about {

#menu .about span {

#menu .rss {

#menu .rss span {

También podéis descargarlas de la página del autor en archivo zip.

Y ahora si, ya está completo y podemos empezar.